<%@ page language="java" import="java.util.*" import="entity.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%user u=((user)session.getAttribute("user")); 
String name=null;
if (u!=null){
	name=u.getUser_name();
}
boolean is_mobile=(boolean)request.getAttribute("is_mobile");
info infos=((info)request.getAttribute("info"));
List<hero>hero_list=infos.getHeroList();
List<equip>equip_list=infos.getEquipList();
List<hex>hex_list=infos.getHexList();
List<trammel>trammel_list=infos.getTrammelList(); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'home.jsp' starting page</title>
    <meta charset="utf-8"> 
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style2.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
	<link href="./army_edit/army_style.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </head>
  
<body>



<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #333333;">
  <a class="navbar-brand" href="./home">
    云顶之奕WiKi
  </a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="./hero_guide">英雄图鉴</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./equip_guide">装备图鉴</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./hex_guide">海克斯图鉴</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./trammel_guide">羁绊图鉴</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./all_army">阵容查看</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./my_army">我的阵容</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./edit_army">阵容编辑</a>
      </li>
    </ul>
  </div>
  <%if (name==null){%>
  <div class="col-md-3 text-end">
    <button type="button" onclick="window.location.href='./account_manage/login.jsp'" class="btn btn-outline-light me-2">登录</button>
    <button type="button" onclick="window.location.href='./account_manage/sign.jsp'" class="btn btn-warning">注册</button>
  </div>
  <%}
  else{ %>
  <div class="col-md-3 text-end">
  <a class="nav-link text-light"><%=name %></a>
  <button type="button" onclick="window.location.href='./quit'" class="btn btn-outline-light me-2">退出登录</button>
  </div>
  <%} %>
  
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<div class="container-fluid bg-dark navbar-dark">
<div class="row"></div>
<div class="row bg-dark" style="margin:0">
<div class="row g-2">
	<div class="col-1 col-sm-1">
		<div class="d-flex justify-content-center align-items-center h-100">
			<input type="text" class="form-control" id="army_name" placeholder="输入阵容名称" name="name">
		</div>
	
	</div>
	<div class="col-10 col-sm-10">
		<div class="list-group ">
			<div class="list-group-item bg-dark">
				<div class="row">
					<div class="col-8 col-sm-8">
						<div class="list-group-item bg-dark">
							<div class="row lineup-hero">
							<%if (is_mobile){
								for (int i=0;i<12;i++){%>
									<div class="col-2 col-sm-2" id="hero-place-<%=i+1%>" data-info="none">
										<img src="picture/bg2.jpg " alt="阵容格子" style="width:50px;">
									</div>
								<%}
							}else{
							for (int i=0;i<12;i++){%>
									<div class="col-2 col-sm-2" id="hero-place-<%=i+1%>" data-info="none">
										<img src="picture/bg2.jpg " alt="阵容格子">
									</div>
							<% }
							}%>
							</div>
						</div>
					</div>
					<div class="col-4 col-sm-4">
							<div class="list-group-item bg-dark">
								<div class="row lineup-hex">
									<%for (int i=0;i<3;i++){%>
										<div class="col-4 col-sm-4" id="hex-place-<%=i+1%>" data-info="none">
											<img src="picture/bg2.jpg " alt="海克斯格子">
										</div>
									<%}%>
								</div>
							</div>
					</div>
				</div>
				<div class="row">
					<div class="col-8 col-sm-8">
						<div class="list-group-item bg-dark">
							<div class="row lineup-trammel">
								<%for (int i=0;i<1;i++){%>
									<div class="col-4 col-sm-4" id="trammel-place-<%=i+1%>" data-info="none">
										<img src="picture/bg2.jpg " alt="羁绊格子">
									</div>
								<%}%>
							</div>
						</div>
					</div>
					<div class="col-4 col-sm-4">
					
						<div class="list-group-item bg-dark">
							<div class="row lineup-equip">
								<%for (int i=0;i<3;i++){%>
									<div class="col-4 col-sm-4" id="equip-place-<%=i+1%>" data-info="none">
										<img src="picture/bg2.jpg" alt="装备格子">
									</div>
								<%}%>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-1 col-sm-1">
		<div class="d-flex justify-content-center align-items-center h-100">
			<button type="button" onclick="sendJsonToServer()" required class="btn btn-outline-light me-2" >保存</button>
		</div>
	</div>
</div>
<div class="col-sm-3"></div>
</div>
<div class="row choice">
	<div class="row">
	<div class="col-3 col-sm-3"></div>
	<div class="col-6 col-sm-6">
		<div class="row">
			<div class="col-3 col-sm-3"></div>
			<div class="col-6 col-sm-6">
			<div class="d-flex justify-content-center align-items-center h-100">
				<nav class="navbar navbar-expand-sm navbar-dark">
				  <ul class="navbar-nav pagination">
					<li class="page-item nav-item"><button type="submit" class="btn btn-outline-light"  onclick="showDiv('div1')">英雄选择</button></li>
					<li class="page-item nav-item"><button type="submit" class="btn btn-outline-light" onclick="showDiv('div2')">海克斯选择</button></li>
					<li class="page-item nav-item"><button type="submit" class="btn btn-outline-light"  onclick="showDiv('div3')">装备选择</button></li>
				  </ul>
				</nav>
				</div>
			</div>
			<div class="col-3 col-sm-3"></div>
		</div>
	</div>
	<div class="row">
		<div id="content">
			<div class="page" data-page="1" id="div1">
				<div class="row">
					<div class="col-sm-12">
						<h2 class="text-light">英雄选择</h2>
					</div>
				</div>
				<div class="row">
					<%if (is_mobile){
					for (int i=0;i<hero_list.size();i++){%>
					<div class="col-2 col-sm-2 hero px-2" id="hero-<%=hero_list.get(i).getHero_id()%>">
						<img src="<%=hero_list.get(i).getImg_url()%>" id="pic" title="<%=hero_list.get(i).getHero_name()%>" style="width: 50px;height:50px;cursor: pointer;">
					</div>
					<%}}
					else{for (int i=0;i<hero_list.size();i++){%>
					<div class="col-md-1 hero px-2" id="hero-<%=hero_list.get(i).getHero_id()%>">
						<img src="<%=hero_list.get(i).getImg_url()%>" id="pic" title="<%=hero_list.get(i).getHero_name()%>" style="width: 100%;cursor: pointer;">
					</div>
					<%}}%>
				</div>
			</div>
			<div class="page" data-page="2"  id="div2" style="display: none;">
				<div class="row">
					<div class="col-sm-12">
						<h2 class="text-light">海克斯选择</h2>
					</div>
					</div>
					<div class="row">
					<%for (int i=0;i<hex_list.size();i++){%>
					<div class="col-md-1 hex px-2" id="hex-<%=hex_list.get(i).getHex_id()%>">
						<img src="<%=hex_list.get(i).getImg_url()%>" id="pic"  title="<%=hex_list.get(i).getHex_name()%>" style="width: 100%;cursor: pointer;">
					</div>
					<%}%>
				</div>

			</div>
			<div class="page" data-page="3"  id="div3"style="display: none;">
				<div class="row">
					<div class="col-sm-12">
						<h2 class="text-light">装备选择</h2>
					</div>
					</div>
					<div class="row">
					<%for (int i=0;i<equip_list.size();i++){%>
					<div class="col-md-1 equip px-2" id="equip-<%=equip_list.get(i).getEquip_id()%>">
						<img src="<%=equip_list.get(i).getImg_url()%>" id="pic"  title="<%=equip_list.get(i).getEquip_name()%>" style="width: 100%;cursor: pointer;">
					</div>
					<%}%>
				</div>
			</div>
		</div>
		</div>
		</div>

<div class="row">
	<div class="col-sm-3"></div>
	<div class="col-sm-6 text-white" style="text-align:center">
  	愿您使用愉快，若发现错误或bug，请添加联系QQ：2208689304
  	</div>
	
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function showDiv(divId) {
  // 获取所有div元素
 var divs = document.getElementsByTagName('data-page');
  
  // 隐藏所有div
 document.getElementById("div1").style.display = "none";
 document.getElementById("div2").style.display = "none";
 document.getElementById("div3").style.display = "none";
  // 显示选中的div
  document.getElementById(divId).style.display = 'block';
}

/* document.getElementById('image-top').addEventListener('click', function() {
  var bottomContainer = document.getElementById('image-container-bottom');
  var newImage = document.createElement('img');
  newImage.src = 'https://game.gtimg.cn/images/lol/act/img/tft/champions/10067.png'; // 替换为你想要添加的图片地址
  newImage.alt = 'Bottom Image';
  bottomContainer.appendChild(newImage);
});


document.getElementById("Image 1").addEventListener('click', function() {
    document.getElementById("Image 2").src = "https://game.gtimg.cn/images/lol/act/img/tft/champions/10067.png";
});    */
let divx=[];
let dive=[];
var j =1;
for(var i =1;i<=12;i++){
	 divx[i] = document.getElementById('i');
}
document.getElementById('pic').addEventListener('click', function() {
    var infoValue = this.dataset.info;
	var src = this.getAttribute("src");
});
function replaceImage(src){
	for(var i =1;i<=12;i++){
	 		if(dive[i].equals("none")){
	 			document.getElementById('i').src = src;
	 			break;
	 		}
}
}
var army_json =  {
   "heros":"",
   "equips":"",
   "haxs": ""
}
var heros=[];
var equips=[];
var hexs=[];
document.addEventListener('DOMContentLoaded', function() {  
    // 获取所有英雄容器  
    const heroes1 = document.querySelectorAll('.hero');  
    // 为每个英雄添加点击事件监听器  
    heroes1.forEach(hero => {  
        hero.addEventListener('click', function(event) {  
            // 阻止事件冒泡  
            event.stopPropagation();  
			const heroId = this.id.replace('hero-', '');
            // 获取当前英雄的图片和名字  
            const img = this.querySelector('img').cloneNode(true); // 克隆图片  
            const name = heroId;
  
            // 查找一个空的阵容格子  
            const emptySlot = document.querySelector('.lineup-hero .col-sm-2[data-info="none"]');  
  			
            if (emptySlot) {  
                // 清空格子内的图片（如果有）  
                emptySlot.innerHTML = '';  
				heros.push(heroId);  
                // 将英雄图片和名字插入到阵容格子中  
                // 注意：这里我们简化处理，只插入图片。如果需要同时显示名字，需要调整HTML结构或添加额外逻辑。  
                emptySlot.appendChild(img);  
			
                // 更新格子的data-info（可选）  
                emptySlot.setAttribute('data-info', name);  
                // 可以在这里添加其他逻辑，比如更新UI、发送数据到服务器等  
            }  
        });  
    });  
});
document.addEventListener('DOMContentLoaded', function() {  
    const equips1 = document.querySelectorAll('.equip');  
    equips1.forEach(equip => {  
        equip.addEventListener('click', function(event) {  
            event.stopPropagation();  
			const equipId = this.id.replace('equip-', '');
            const img = this.querySelector('img').cloneNode(true);  
            const name = equipId;
            const emptySlot = document.querySelector('.lineup-equip .col-sm-4[data-info="none"]');  
  			
            if (emptySlot) {  
                emptySlot.innerHTML = '';  
				equips.push(equipId);   
                emptySlot.appendChild(img);  
                emptySlot.setAttribute('data-info', name);  
            }  
        });  
    });  
});
document.addEventListener('DOMContentLoaded', function() {  
    const hexs1 = document.querySelectorAll('.hex');  
    hexs1.forEach(hex => {  
        hex.addEventListener('click', function(event) {  
            event.stopPropagation();  
			const hexId = this.id.replace('hex-', '');
            const img = this.querySelector('img').cloneNode(true);  
            const name = hexId;
            const emptySlot = document.querySelector('.lineup-hex .col-sm-4[data-info="none"]');  
  			
            if (emptySlot) {  
                emptySlot.innerHTML = '';  
				hexs.push(hexId);   
                emptySlot.appendChild(img);  
                emptySlot.setAttribute('data-info', name);  
            }  
        });  
    });  
});
function trimBrackets(str) {  
  // 匹配字符串开始处的`{`零个或多个，和结束处的`}`零个或多个  
  return str.replace(/^\{+|\}+$/g, '');  
}  
function sendJsonToServer() {  
	var inputElement = document.getElementById('army_name');  
	var inputValue = inputElement.value;  
    var dataToSend = {  
        "heros": "",  
        "equips": "",  
        "hexs": ""
    };  
	for (var i=0;i<heros.length;i++){
		if(i==0){
			dataToSend["heros"]+=heros[i];
		}
		else{
			dataToSend["heros"]+=","+heros[i];
		}
	}
	for (var i=0;i<equips.length;i++){
		if(i==0){
			dataToSend["equips"]+=equips[i];
		}
		else{
			dataToSend["equips"]+=","+equips[i];
		}
	}
	for (var i=0;i<hexs.length;i++){
		if(i==0){
			dataToSend["hexs"]+=hexs[i];
		}
		else{
			dataToSend["hexs"]+=","+hexs[i];
		}
	}
    // 将对象转换为JSON字符串  
    var queryString = JSON.stringify(dataToSend);  
    var url = './edit_army_msg?army_detail=' + trimBrackets(queryString)+"&army_name="+inputValue; 
	window.location.href = url;
}  
</script>